<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--bootstrap-->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../bootstrap/js/bootstrap.min.js"></script>

    <script src="../js/HttpUtil.js"></script>

    <!--引入存到浏览器的js文件-->
    <script src="../js/UserCacheUtil.js"></script>


    <script src="../js/CartUtils.js"></script>
</head>
<body>

<!--导入页面公共头部-->
<div class="Top_header"></div>

<div class="container">
    <div class="row" style="margin-left: 40px">
        <h3>我的购物车<small>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</small></h3>
    </div>

    <div class="row"  style="margin-top: 40px;">

        <div class="col-md-10 col-md-offset-1" id="car-table">
            <table class="table table-bordered table-striped table-hover" id="div_carts_list">
                <tr>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>价格(元)</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </table>
        </div>

        <div class="row">
            <div class="pull-right" style="margin-right: 40px;">

                <div>
                    <span id="clearCart" class="btn btn-default btn-lg">清空购物车</span>
                    &nbsp;&nbsp;
                    <a href="cart1.html" class="btn  btn-danger btn-lg">选择收货地址</a>

                </div>
                <br><br>
                <div style="margin-bottom: 20px;">
                    商品金额总计(元)：<span id="total" class="text-danger"><b id="s_sum"></b></span>
                </div>
            </div>
        </div>
    </div>

</div>

<script>

    $(function () {
        LoadCartInfo();
        loadUserInfo();
    });


    // 发起请求查询该用户修改数据库后更新数据
    function LoadCartInfo1() {
        //发起ajax请求
        let user1 = getLocalStorage("loginUser");
        let url = "/cart/selectCart";
        // 这里的userId一定要和后台接口属性对应上
        let params = {
            userId : user1.uId };
        httpGet(url, params ,function (data) {
            //业务处理
            renderingGoodsList1(data);
        });
    }

    // 根据购物车id删除商品
    $("#car-table").on("click","#delete",deleteGoods)
    function deleteGoods() {
        let url = "/cart/deleteCart";
        // 询问用户是否真的删除商品
        if (!confirm("你真的要删除吗")) return;
        // 删除该元素节点并获取data-id属性的值
        var cId = $(this).parents(".tr").find("#cid").html();
        console.log(cId+"拿到了没");
        $(this).parents(".tr").remove();
        // 发送ajax请求实现数据库中的数据删除
        httpGet(url,{
            cId : cId
        },function (data) {
            //业务处理
            location.href = "cart.html";
            /*            LoadCartInfo();*/
        });
    }

    // 清空该用户的购物车
    $("#clearCart").on("click",clearCart)

    /*--------------------增减修改商品数量------------------*/

    // 减少商品的数量
    $("#car-table").on("click","#reduction",minusCnum)
    function minusCnum() {
        /*        let url = "http://localhost:8080/shop-api/cart/updateCart";*/
        var num = $(this).parent().next().text();
        console.log(num+"有没有拿到商品数量");
        if(num<=1){
            deleteGoods.call(this);
        }else{
            $(this).parent().next().text(parseInt(num)-1);
            var cId = parseInt( $(this).parents(".tr").find("#cid").html());
            var gPrice = parseInt( $(this).parents(".tr").find("#price").text());
            console.log(gPrice+"是否拿到了单价")
            // 发送网络请求修改数据库数量
            updateNum(cId,parseInt(num)-1,gPrice);
        }
        checkedNum(this,true);
    }

    // 增加商品的数量
    $("#car-table").on("click","#addCnum",addCnum)
    function addCnum() {
        var num = $(this).parent().prev().text();
        $(this).parent().prev().text(parseInt(num)+1);
        console.log(num+"有没有拿到商品数量");
        var cId = parseInt( $(this).parents(".tr").find("#cid").text());
        console.log(cId+"有没有拿到商品id");
        var gPrice = parseInt( $(this).parents(".tr").find("#price").text());
        console.log(gPrice+"是否拿到了单价")
        checkedNum(this,true);
        updateNum(cId,parseInt(num)+1,gPrice);
        /*        checkedNum(this,true);*/
    }
    // 修改数据后发起ajax请求同步更新数据库
    function updateNum(cId,cNum,gPrice) {
        $.ajax({
            url:"/shop-api/cart/updateCart",
            type:"get",
            data: {
                cId: cId,
                cNum: cNum,
                gPrice: gPrice
            },
            success:function (res) {
                console.log(res);
                LoadCartInfo1();
            },
        })
    }

    /**'
     *  计算单个商品总价
     * @param goodsId
     * @param num
     * @param userId
     */
    function checkedNum(ele,bool){
        var parent = $(ele).parents(".tr");
        // 获取商品单价
        var s1 = parent.find("#price").html();
        console.log(s1+"111111111")
        // 获取数量
        var num = parent.find("#cNum").html();
        console.log(num+"2222")
        var sum = (num*s1);
        console.log(sum+"多少1111");
        parent.find('#all').html('￥'+ sum);
    }


</script>

<!-- 添加头header.html -->
<script>

    //等待页面加载完成，导入 header.html
    $(".Top_header").load('/shop-app/include/header.html');
</script>

</body>

</html>